<template>
  <div>
    <div class="commentHeader">
      <div class="headPortrait">
        <img src="../../assets/img/other/hotIcon.png" alt="">
        <div style="margin-top: 5px">小店</div>
      </div>
      <div class="commentBody">
        <div>
          <van-rate size="20px" style="margin-top: 17px;margin-left: 10px" color="#ffd21e" v-model="star" readonly />
          <div style="font-size:13px;margin-left: 10px;display: inline-block">五星好评</div>
        </div>
        <div class="commentContent">
          商品保存非常好，发货及时，老板态度非常好，其中有个西瓜裂了，老板还给退了西瓜钱。值得信任
        </div>
        <div class="commentImg">
          <img src="../../assets/img/other/hotIcon.png" alt="">
          <img src="../../assets/img/other/hotIcon.png" alt="">
          <img src="../../assets/img/other/hotIcon.png" alt="">
        </div>
        <div class="commentFooter">
          <div>
            规格:独立包装(1个装)
          </div>
          <div style="margin-left: 5px">
            数量:5
          </div>
        </div>
      </div>

    </div>
    <div style="height: 1px;width:100%;background:rgb(243, 240, 240);"></div>
  </div>
</template>

<script>
export default {
name: "index",
  data(){
  return{
    star:5
  }
  }
}
</script>

<style scoped lang="less">
.commentHeader{
  margin: 15px;
  display: flex;
  .commentBody{
    margin-left: 5px;
    .commentFooter{
      display: flex;
      color:  rgb(196, 185, 185);
      margin-top: 5px;
      font-size: 10px;
    }
    .commentImg{
    img{
      margin-left: 3px;
      height: 35px;
      width: 30px;
    }
    }
    .commentContent{
      margin-top: 10px;
      font-size: 10px;
    }
  }
  .headPortrait{
    img{
      height: 100px;
      width: 80px;
    }
    text-align: center;
    color: #4bd863;
    font-size: 12px;
    font-weight: bold;
  }
}
</style>
